<template>
    <div>
        <Header></Header>
        <div id="partial" class="container display fade in mt-5" data-display-name="navs">
            <div class="profile-header space shadow">
                <div class="gray dock blur-lg back" style="background-image: url(doc/img/img2.jpg)"></div>
                <div class="front dock text-white">
                    <div class="avatar avatar-xl circle space-sm" @click="jumpToAvatar">
                        <img :src="img" alt="">
                    </div>
                    <h4 class="lead text-shadow-black">{{ name }}</h4>
                    <h5 class="lead_1 text-shadow-black">{{ loginflag }}</h5>
                </div>
            </div>

            <div class="section">
                <div class="list with-divider">
                    <a class="item with-avatar" @click="jumpToLabel">
                        <div class="avatar text-gray"><i class="icon-list-ul"></i></div>
                        <div class="title">浏览记录</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a>
                    <a class="item with-avatar" @click="jumpToCollection">
                        <div class="avatar text-gray"><i class="icon-pushpin"></i></div>
                        <div class="title">收藏书单</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a>
                    <a class="item with-avatar" @click="jumpToMessage">
                        <div class="avatar text-gray"><i class="icon icon-comments"></i></div>
                        <div class="title">我的消息</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a>
                    <a class="item with-avatar" @click="jumpToModPwd">
                        <div class="avatar text-gray"><i class="icon icon-lock"></i></div>
                        <div class="title">安全中心</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a>
                    <a class="item with-avatar" @click="jumpToConfig">
                        <div class="avatar text-gray"><i class="icon-cog"></i></div>
                        <div class="title">个人设置</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a>
                    <!-- <a class="item with-avatar">
                        <div class="avatar text-gray"><i class="icon-qrcode"></i></div>
                        <div class="title">我的二维码</div>
                        <i class="icon icon-chevron-right muted"></i>
                    </a> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from './components/Header.vue'

export default {
  components: {
    Header
  },
  data() {
    return {
      img: this.$store.state.imgbase64,
      name: this.$store.state.name,
      loginflag: this.$store.state.loginflag
    }
  },
  methods: {
    jumpToConfig() {
      this.$router.push({path: '/config', query: { tab: '个人设置' }})
    },
    jumpToAvatar() {
      this.$router.push({path: '/avatar'})
    },
    jumpTo() {
      this.$router.go(-1)
    },
    jumpToLabel() {
      this.$router.push({path: '/label', query: {tab: '浏览历史'}})
    },
    jumpToCollection() {
      this.$router.push({path: '/label', query: {tab: '收藏书单'}})
    },
    jumpToModPwd() {
      this.$router.push({path: '/modpwd'})
    },
    jumpToMessage() {
      this.$router.push({path: '/message', query: { tab: '我的消息' }})
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-header {
  position: relative;
  overflow: hidden;
  min-height: 8rem;
  .back {
    top: -2rem;
    left: -2rem;
    right: -2rem;
    bottom: -2rem;
    background-position: center;
    background-size: cover
  }
  .front {
    background: rgba(0, 0, 0, .1);
    text-align: center;
    padding: 1.5rem
  }
}
.lead_1 {
  font-size: 0.2rem;
  font-weight: 300;
}
</style>
